import styles from './register.module.scss';
import Button from '../../components/button/button';
import { Link } from 'react-router-dom';
import { FieldValues, useForm } from 'react-hook-form';
import { DevTool } from '@hookform/devtools';
import Input from '../../components/input/inpuTest';

export const Register = () => {
	/* для  DevTool зависимостью является control*/
	return (
		<div>
			{/* {error && <p style={{ color: 'red' }}>{error}</p>} */}
			<h2>Регистрация</h2>
			<form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
				<div className={styles.input}>
					<label htmlFor="email">Ваш email</label>
					<input
						id="email"
						{...register('name', {
							required: 'Обязательное поле',
							validate: {
								isAdmin: (fieldValue) => {
									return fieldValue !== 'admin' || 'Используйте другое имя';
								},
								isOleg: (fieldValue) => {
									return fieldValue !== 'Олег' || 'Используйте другое имя';
								}
							}
						})}
						type="text"
					/>
					{/* {errors.name?.message && <p style={{ color: 'red' }}>{errors.name?.message}</p>} */}
				</div>
				<div className={styles.input}>
					<label htmlFor="password">Ваш пароль</label>
				</div>
				<div className={styles.input}>
					<label htmlFor="fullName">Ваше имя</label>
					<Input
						{...register('fullName')}
						id="fullName"
						name="fullName"
						placeholder="Имя"
					/>
				</div>
				<Button appearance="big">Зарегистрироваться</Button>
			</form>
			<DevTool control={control} />
			<div className={styles.navigation}>
				<div>
          Есть аккаунт?{' '}
					<Link
						style={{ color: '#ffa600' }}
						className={styles.href}
						to="/auth/login"
					>
            Войти
					</Link>
				</div>
				<div>
					<Link style={{ color: '#ffa600' }} className={styles.href} to="/">
            На главную
					</Link>
				</div>
			</div>
		</div>
	);
};
